import {iMicroWebFrameSubMessageData} from "@peryl/micro-web";
import {computed, designPage, useRefs} from "@peryl/react-compose";

export default designPage(() => {

  const { refs, onRef } = useRefs({ frame: Object as any as HTMLIFrameElement });
  const src = computed(() => `http://localhost:4015/micro-web-react-sub-umi4-antdpro/micro`);

  const microConfigId = 'react-sub-umi4-antdpro';

  const handler = {
    onLoad: () => {
      const initMessage: iMicroWebFrameSubMessageData = { microWebFrameMessage: { type: 'init', data: { microConfigId } } };
      refs.frame!.contentWindow!.postMessage(JSON.stringify(initMessage), '*');
    },
  };

  return () => (
    <iframe src={src.value} style={{ height: '100%' }} ref={onRef.frame} onLoad={handler.onLoad}/>
  );
});
